// 柱状图1模块
// (function (yuefen) {
//   // 实例化对象
//   var myChart = echarts.init(document.querySelector(".bar .chart"));
//   // 指定配置和数据
//   var option = {
//     color: ["#2f89cf"],
//     tooltip: {
//       trigger: "axis",
//       axisPointer: {
//         // 坐标轴指示器，坐标轴触发有效
//         type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
//       }
//     },
//     grid: {
//       left: "0%",
//       top: "10px",
//       right: "0%",
//       bottom: "4%",
//       containLabel: true
//     },
//     xAxis: [
//       {
//         type: "category",
//         data: [],
//         axisTick: {
//           alignWithLabel: true
//         },
//         axisLabel: {
//           textStyle: {
//             color: "rgba(255,255,255,.6)",
//             fontSize: "12"
//           }
//         },
//         axisLine: {
//           show: false
//         }
//       }
//     ],
//     yAxis: [
//       {
//         type: "value",
//         axisLabel: {
//           textStyle: {
//             color: "rgba(255,255,255,.6)",
//             fontSize: "12"
//           }
//         },
//         axisLine: {
//           lineStyle: {
//             color: "rgba(255,255,255,.1)"
//             // width: 1,
//             // type: "solid"
//           }
//         },
//         splitLine: {
//           lineStyle: {
//             color: "rgba(255,255,255,.1)"
//           }
//         }
//       }
//     ],
//     series: [
//       {
//         name: "直接访问",
//         type: "bar",
//         barWidth: "35%",
//         data: [],
//         itemStyle: {
//           barBorderRadius: 5
//         }
//       }
//     ]
//   };
//   // // 进馆人数月度分布
//   $.ajax({
//     url: "https://sass-test.doit10019.com/api/largeScreen/monthPercent",
//     success: function (obj) {
//       //   console.log(obj.data.x,'12123')
//       //  console.log(  option.xAxis[0].data )
//       option.xAxis[0].data = obj.data.x
//       option.series[0].data = obj.data.y

//     },
//     dataType: "json",
//     async: false
//   })
//   //-----定时器start-----
//   let timer;
//   // 定义定时器函数
//   function startTimer() {
//     $.ajax({
//       url: "https://sass-test.doit10019.com/api/largeScreen/monthPercent",
//       success: function (obj) {
//         option.xAxis[0].data = obj.data.x;
//         option.series[0].data = obj.data.y
//         myChart.setOption(option);
//       },
//       dataType: "json",
//       async: false
//     })
//   }
//   // 开启定时器
//   timer = setInterval(startTimer, 60000);
//   //-----定时器end-----
//   // 把配置给实例对象
//   myChart.setOption(option);
//   window.addEventListener("resize", function () {
//     myChart.resize();
//   });

//   // 数据变化
//   // var dataAll = [
//   //   { year: "2019", data: [200, 300, 300, 900, 1500, 1200, 600] },
//   //   { year: "2020", data: [300, 400, 350, 800, 1800, 1400, 700] }
//   // ];

//   document.querySelector(".bar h2").addEventListener("click", function (e) {
//     var i = e.target == this.children[0] ? 0 : 1;
//     option.series[0].data = dataAll[i].data;
//     myChart.setOption(option);
//   });
// })();




// // 折线图定制
// (function () {
//   // 基于准备好的dom，初始化echarts实例
//   var myChart = echarts.init(document.querySelector(".line .chart"));

//   // (1)准备数据
//   var data = {
//     year: [
//       [100, 200, 300, 100],
//       [50, 10, 45, 78]
//     ]
//   };
//   // 全局场馆客流统计
//   $.ajax({
//     url: "https://sass-test.doit10019.com/api/largeScreen/index",
//     success: function (obj) {
//       data.year[0] = obj.data.lineChartData.data[0]
//       data.year[1] = obj.data.lineChartData.data[1]
//     },
//     dataType: "json",
//     async: false
//   })

//   //-----定时器start-----
//   let timer8;
//   // 定义定时器函数
//   function startTimer() {
//     $.ajax({
//       url: "https://sass-test.doit10019.com/api/largeScreen/index",
//       success: function (obj) {
//         data.year[0] = obj.data.lineChartData.data[0]
//         data.year[1] = obj.data.lineChartData.data[1]
//       },
//       dataType: "json",
//       async: false
//     })
//   }
//   // 开启定时器
//   timer8 = setInterval(startTimer, 60000);
//   //-----定时器end-----

//   // 2. 指定配置和数据
//   var option = {
//     color: ["#00f2f1", "#ed3f35"],
//     tooltip: {
//       // 通过坐标轴来触发
//       trigger: "axis"
//     },
//     legend: {
//       // 距离容器10%
//       right: "10%",
//       // 修饰图例文字的颜色
//       textStyle: {
//         color: "#4c9bfd"
//       }
//       // 如果series 里面设置了name，此时图例组件的data可以省略
//       // data: ["邮件营销", "联盟广告"]
//     },
//     grid: {
//       top: "10%",
//       left: "3%",
//       right: "4%",
//       bottom: "15%",
//       show: true,
//       borderColor: "#012f4a",
//       containLabel: true
//     },

//     xAxis: {
//       type: "category",
//       boundaryGap: false,
//       data: [],
//       // 去除刻度
//       axisTick: {
//         show: false
//       },
//       // 修饰刻度标签的颜色
//       axisLabel: {
//         color: "rgba(255,255,255,.7)"
//       },
//       // 去除x坐标轴的颜色
//       axisLine: {
//         show: false
//       }
//     },
//     yAxis: {
//       type: "value",
//       // 去除刻度
//       axisTick: {
//         show: false
//       },
//       // 修饰刻度标签的颜色
//       axisLabel: {
//         color: "rgba(255,255,255,.7)"
//       },
//       // 修改y轴分割线的颜色
//       splitLine: {
//         lineStyle: {
//           color: "#012f4a"
//         }
//       }
//     },
//     series: [
//       // {
//       //   name: "",
//       //   type: "line",
//       //   stack: "总量",
//       //   // 是否让线条圆滑显示
//       //   smooth: true,
//       //   data: data.year[0]
//       // },
//       {
//         name: "出馆人数",
//         type: "line",
//         stack: "总量",
//         // 是否让线条圆滑显示
//         smooth: true,
//         data: data.year[0]
//       },
//       {
//         name: "入馆人数",
//         type: "line",
//         stack: "总量",
//         smooth: true,
//         data: data.year[1]
//       }
//     ]
//   };

//   // 全局场馆客流统计
//   $.ajax({
//     url: "https://sass-test.doit10019.com/api/largeScreen/index",
//     success: function (obj) {
//       option.xAxis.data = obj.data.lineChartData.categories
//     },
//     dataType: "json",
//     async: false
//   })
//   //-----定时器start-----
//   let timer2;
//   // 定义定时器函数
//   function startTimer() {
//     $.ajax({
//       url: "https://sass-test.doit10019.com/api/largeScreen/index",
//       success: function (obj) {
//         option.xAxis.data = obj.data.lineChartData.categories
//       },
//       dataType: "json",
//       async: false
//     })

//   }
//   // 开启定时器
//   timer2 = setInterval(startTimer, 60000);
//   //-----定时器end-----

//   // 3. 把配置和数据给实例对象
//   myChart.setOption(option);

//   // 重新把配置好的新数据给实例对象
//   myChart.setOption(option);
//   window.addEventListener("resize", function () {
//     myChart.resize();
//   });
// })();




// 点位分布统计模块
// (function () {
//   // 1. 实例化对象
//   // var myChart = echarts.init(document.querySelector(".Information_Delivery  .chart"));
//   var myChart3 = echarts.init(document.querySelector(".Information_Delivery .chart"));

//   option3 = {
//     legend: {
//       x: 'left',
//       y: 'top',
//       textStyle: {
//         color: '#4ADEFE',
//       }
//     },
//     grid: {
//       x: 30,
//       y: 50,
//       x2: 0,
//       y2: 45
//     },
//     // tooltip: {},
//     tooltip: {
//       // trigger: 'item',
//       // formatter: '{b} : {c} ({d}%)'
//     },
//     dataset: {
//       // source: [
//       //   ['product', '室内场', '室外场'],
//       //   ['08:00', 43.3, 85.8],
//       //   ['09:00', 83.1, 73.4],
//       //   ['12:00', 86.4, 65.2],
//       //   ['14:00', 72.4, 53.9],
//       //   ['16:00', 72.4, 53.9]
//       // ]
//       source: []
//     },
//     xAxis: {
//       type: 'category',
//       axisLine: {
//         lineStyle: {
//           color: "#4ADEFE",
//         }
//       }
//     },
//     yAxis: {
//       axisLine: {
//         lineStyle: {
//           color: "#4ADEFE",
//         }
//       },
//       splitLine: {
//         show: true,
//         lineStyle: {
//           color: '#4ADEFE',
//         }
//       }
//     },
//     series: [
//       {
//         type: 'bar',
//         barMaxWidth: '20',
//         itemStyle: {
//           normal: {
//             color: '#18ffdc',
//           },
//         },
        
//       },
//       // {
//       //   type: 'bar',
//       //   barMaxWidth: '20',
//       //   itemStyle: {
//       //     normal: {
//       //       color: '#ded42d',
//       //     },
//       //   },
//       // }
//     ]
//   };
//   $.ajax({
//     url: "https://sass-test.doit10019.com/api/largeScreen/court",
//     success: function (obj) {
//       console.log(obj, 'fdgd')
//       option3.dataset.source = obj.data

//     },
//     dataType: "json",
//     async: false
//   })
//   //-----定时器start-----
//   let timer337;
//   // 定义定时器函数
//   function startTimer() {
//     // 场地预订率
//     $.ajax({
//       url: "https://sass-test.doit10019.com/api/largeScreen/court",
//       success: function (obj) {
//         console.log(obj, 'fdgd')
//         option3.dataset.source = obj.data
//       },
//       dataType: "json",
//       async: false
//     })
//   }
//   // 开启定时器
//   timer337 = setInterval(startTimer, 60000);
//   //-----定时器end-----
//   myChart3.setOption(option3);
//   // 4. 当我们浏览器缩放的时候，图表也等比例缩放
//   window.addEventListener("resize", function () {
//     // 让我们的图表调用 resize这个方法
//     myChart3.resize();
//   });
// })();


// //订单
// (function () {
//     var data = {
//         day365: { orders: '20,301,987', amount: '99834' },
//         day90: { orders: '301,987', amount: '9834' },
//         day30: { orders: '1,987', amount: '3834' },
//         day1: { orders: '987', amount: '834' }
//     }
//     //点击事件
//     $('.order').on('click', '.filter a', function () {
//         //点击之后加类名
//         $(this).addClass('active').siblings().removeClass('active');
//         // 先获取点击a的 data-key自定义属性
//         var key = $(this).attr('data-key');
//         //获取自定义属性
//         // data{}==>data.shuxing data['shuxing]
//         key = data[key];//
//         $('.order .item h4:eq(0)').text(key.orders);
//         $('.order .item h4:eq(1)').text(key.amount);
//     });
//     //定时器
//     var index = 0;
//     var aclick = $('.order a');
//     setInterval(function () {
//         index++;
//         if (index > 3) {
//             index = 0;
//         }
//         //每san秒调用点击事件
//         aclick.eq(index).click();
//     }, 3000);
// })();

// // 男女统计模块
// (function () {
//   // 1. 实例化对象
//   var myChart3 = echarts.init(document.querySelector(".infographic .chart"));

//   // 基于准备好的dom，初始化echarts实例

//   option3 = {
//     tooltip: {
//       trigger: 'item',
//       formatter: "{a} <br/>{b} : {c} ({d}%)"
//     },
//     calculable: true,
//     series: [
//       {
//         name: '发布数量',
//         type: 'pie',
//         radius: '55%',
//         center: ['50%', '50%'],
//         data: [
//           { value: 35, name: '男', itemStyle: { color: '#5739d3' } },
//           { value: 10, name: '女', itemStyle: { color: '#d73c75' } },
//         ],
//         itemStyle: {
//           normal: {
//             label: {
//               show: true,
//               formatter: '{b} : {c} ({d}%)'
//             },
//             labelLine: { show: true }
//           }
//         }
//       }
//     ]
//   };

//   $.ajax({
//     url: "https://sass-test.doit10019.com/api/largeScreen/consumeSex",
//     success: function (obj) {
//       option3.series[0].data = obj.data.data
//     },
//     dataType: "json",
//     async: false
//   })
//   //-----定时器start-----
//   let timer4;
//   // 定义定时器函数
//   function startTimer() {
//     // 场地预订率
//     // 进场男女占比
//     // 进馆人数月度分布
//     $.ajax({
//       url: "https://sass-test.doit10019.com/api/largeScreen/consumeSex",
//       success: function (obj) {
//         option3.series[0].data = obj.data.data
//       },
//       dataType: "json",
//       async: false
//     })

//   }
//   // 开启定时器
//   timer4 = setInterval(startTimer, 60000);
//   //-----定时器end-----

//   // 使用刚指定的配置项和数据显示图表。
//   myChart3.setOption(option3);
//   // 4. 当我们浏览器缩放的时候，图表也等比例缩放
//   window.addEventListener("resize", function () {
//     // 让我们的图表调用 resize这个方法
//     myChart3.resize();
//   });
// })();


// 男女统计模块
(function () {
  // 1. 实例化对象
  // var myChart3 = echarts.init(document.querySelector(".echart44 .chart"));

  var myChart44 = echarts.init(document.querySelector(".echart44 .chart"));
  var data = [683, 234, 234, 523, 69, 60, 70, 69]
  var titlename = ['文本1', '文本2', '文本3', '文本4', '文本5', '文本6', '文本7', '文本8'];
  var valdata = [683, 234, 234, 523, 345, 234, 523, 345]

  
  $.ajax({
    url: "https://diantuo.doit10019.com/api/largeScreen/HaiXiZhouSort",
    success: function (obj) {
      data = obj.data.value;
      titlename = obj.data.title;
      valdata = obj.data.value;
    },
    dataType: "json",
    async: false,
  });
  //-----定时器start-----
  let timer5;
  // 定义定时器函数
  function startTimer() {
    // 运动排行
  $.ajax({
    url: "https://diantuo.doit10019.com/api/largeScreen/HaiXiZhouSort",
    success: function (obj) {
      data = obj.data.value;
      titlename = obj.data.title;
      valdata = obj.data.value;
    },
    dataType: "json",
    async: false,
  });
  }
  // 开启定时器
  timer5 = setInterval(startTimer, 60000);
  //-----定时器end-----

  option = {

    grid: {
      left: '10',
      top: '20',
      right: '30',
      bottom: '-25',
      containLabel: true
    },
    xAxis: {
      show: false
    },
    yAxis: [{
      show: true,
      data: titlename,
      inverse: true,
      axisLine: {
        show: false
      },

      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
        },
        formatter: function (value, index) {
          return [
            '{title|' + value + '} '
          ].join('\n')
        },
        rich: {}
      },

    }, {
      show: true,
      inverse: true,
      data: valdata,
      axisLabel: {
        textStyle: {
          color: 'rgba(255,255,255,.5)'
        }
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },

    }],
    series: [{
      name: '条',
      type: 'bar',
      yAxisIndex: 0,
      data: data,
      barWidth: '40%',
      itemStyle: {
        normal: {
          barBorderRadius: 30,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            offset: 0,
            color: '#248ff7'
          }, {
            offset: 1,
            color: '#3893e5'
          }]),
        }
      },
      label: {
        normal: {
          show: false,
        }
      },
    }, {
      name: '框',
      type: 'bar',
      yAxisIndex: 1,
      barGap: '-100%',
      data: [100, 100, 100, 100, 100, 100, 100, 100],
      barWidth: '40%',
      itemStyle: {
        normal: {
          color: 'none',
          borderColor: 'rgba(255,255,255,.1)',
          borderWidth: 1,
          barBorderRadius: 15,
        }
      }
    }]
  };




  // 使用刚指定的配置项和数据显示图表。
  myChart44.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart44.resize();
  });
})();


// 点位分布统计模块
(function () {
  // 1. 实例化对象
  const scale = 1; // 从 1920 到 3840 的缩放比例
  var myChart = echarts.init(document.querySelector(".pie2 .chart"));

  option = {
    animation: true,
    title: {
      x: "center",
      y: "center",
      textStyle: {
        color: "#fff",
        fontSize: 10 * scale, // 字体大小缩放
        fontWeight: "normal",
        align: "center",
        width: "200px",
      },
      subtextStyle: {
        color: "#fff",
        fontSize: 12 * scale, // 字体大小缩放
        fontWeight: "normal",
        align: "center",
      },
    },
    legend: {
      width: "100%",
      left: "center",
      textStyle: {
        color: "#fff",
        fontSize: 12 * scale, // 字体大小缩放
      },
      icon: "circle",
      right: "0",
      bottom: "0",
      padding: [15 * scale, 20 * scale], // 内边距缩放
      itemGap: 5 * scale, // 项间距缩放
      data: ["票", "卡", "培训", "私教", "场地"],
    },
    series: [
      {
        type: "pie",
        center: ["50%", "40%"],
        radius: ["20%", "34%"],
        color: ["#2bf8ff", "#478af8", "#40f453", "#eca00e", "#faee04"],
        startAngle: 135,
        labelLine: {
          normal: {
            length: 15 * scale, // 标签线长度缩放
          },
        },
        label: {
          normal: {
            formatter: "{b|{b}:}  {per|{d}%} ",
            backgroundColor: "rgba(255, 147, 38, 0)",
            borderColor: "transparent",
            borderRadius: 4 * scale, // 边框圆角缩放
            rich: {
              a: {
                color: "#999",
                lineHeight: 12 * scale, // 行高缩放
                align: "center",
              },
              hr: {
                borderColor: "#aaa",
                width: "100%",
                borderWidth: 1,
                height: 0,
              },
              b: {
                color: "#b3e5ff",
                fontSize: 12 * scale, // 字体大小缩放
                lineHeight: 33 * scale, // 行高缩放
              },
              c: {
                fontSize: 12 * scale, // 字体大小缩放
                color: "#eee",
              },
              per: {
                color: "#FDF44E",
                fontSize: 12 * scale, // 字体大小缩放
                padding: [5 * scale, 8 * scale], // 内边距缩放
                borderRadius: 2 * scale, // 边框圆角缩放
              },
            },
            textStyle: {
              color: "#fff",
              fontSize: 12 * scale, // 字体大小缩放
            },
          },
        },
        emphasis: {
          label: {
            show: true,
            formatter: "{b|{b}:}  {per|{d}%}  ",
            backgroundColor: "rgba(255, 147, 38, 0)",
            borderColor: "transparent",
            borderRadius: 4 * scale, // 边框圆角缩放
            rich: {
              a: {
                color: "#999",
                lineHeight: 22 * scale, // 行高缩放
                align: "center",
              },
              hr: {
                borderColor: "#aaa",
                width: "100%",
                borderWidth: 1,
                height: 0,
              },
              b: {
                color: "#fff",
                fontSize: 12 * scale, // 字体大小缩放
                lineHeight: 33 * scale, // 行高缩放
              },
              c: {
                fontSize: 12 * scale, // 字体大小缩放
                color: "#eee",
              },
              per: {
                color: "#FDF44E",
                fontSize: 12 * scale, // 字体大小缩放
                padding: [5 * scale, 6 * scale], // 内边距缩放
                borderRadius: 2 * scale, // 边框圆角缩放
              },
            },
          },
        },

        data: [
          {
            name: "票",
            value: 3,
          },
          {
            name: "卡",
            value: 2,
          },
          {
            name: "培训",
            value: 26,
          },
          {
            name: "私教",
            value: 24,
          },
          {
            name: "场地",
            value: 12,
          },
        ],
      },
      {
        type: "pie",
        center: ["50%", "40%"],
        radius: ["15%", "14%"],
        label: {
          show: false,
        },
        data: [
          {
            value: 70,
            name: "",
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#9F17FF",
                    },
                    {
                      offset: 0.2,
                      color: "#01A4F7",
                    },
                    {
                      offset: 0.5,
                      color: "#FE2C8A",
                    },
                    {
                      offset: 0.8,
                      color: "#FEE449",
                    },
                    {
                      offset: 1,
                      color: "#00FFA8",
                    },
                  ],
                },
              },
            },
          },
        ],
      },
    ],
  };
  $.ajax({
    url: "https://diantuo.doit10019.com/api/largeScreen/HaiXiZhouBall",
    success: function (obj) {
      console.log(obj, "fdgd");
      option.series[0].data = obj.data.series[0].data;
      option.legend.data = obj.data.order_type_list;
      myChart.setOption(option); // 更新图表
    },
    dataType: "json",
    async: false,
  });
  //-----定时器start-----
  let timer6;
  // 定义定时器函数
  function startTimer() {
    // 消费类型占比
    $.ajax({
      url: "https://diantuo.doit10019.com/api/largeScreen/HaiXiZhouBall",
      success: function (obj) {
        console.log(obj, "fdgd");
        option.series[0].data = obj.data.series[0].data;
        option.legend.data = obj.data.order_type_list;
        myChart.setOption(option); // 更新图表
      },
      dataType: "json",
      async: false,
    });
  }
  // 开启定时器
  timer6 = setInterval(startTimer, 60000);
  //-----定时器end-----

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  myChart.currentIndex = -1;
  //myChart.setOption(option);
  //console.log(option.series[0].data[0]);
  setInterval(function () {
    var dataLen = option.series[0].data.length;
    // 取消之前高亮的图形
    myChart.dispatchAction({
      type: "downplay",
      seriesIndex: 0,
      dataIndex: myChart.currentIndex,
    });
    myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
    // 高亮当前图形
    myChart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: myChart.currentIndex,
    });
  }, 1000);

  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();


// 饼形图定制
// 折线图定制
// (function () {
//   // 基于准备好的dom，初始化echarts实例
//   var myChart = echarts.init(document.querySelector(".pie .chart"));

//   option = {
//     tooltip: {
//       trigger: "item",
//       formatter: "{a} <br/>{b}: {c} ({d}%)",
//       position: function (p) {
//         //其中p为当前鼠标的位置
//         return [p[0] + 10, p[1] - 10];
//       }
//     },
//     legend: {
//       top: "90%",
//       itemWidth: 10,
//       itemHeight: 10,
//       data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
//       textStyle: {
//         color: "rgba(255,255,255,.5)",
//         fontSize: "12"
//       }
//     },
//     series: [
//       {
//         name: "年龄分布",
//         type: "pie",
//         center: ["50%", "42%"],
//         radius: ["40%", "60%"],
//         color: [
//           "#065aab",
//           "#066eab",
//           "#0682ab",
//           "#0696ab",
//           "#06a0ab",
//           "#06b4ab",
//           "#06c8ab",
//           "#06dcab",
//           "#06f0ab"
//         ],
//         label: { show: false },
//         labelLine: { show: false },
//         data: [
//           { value: 1, name: "0岁以下" },
//           { value: 4, name: "20-29岁" },
//           { value: 2, name: "30-39岁" },
//           { value: 2, name: "40-49岁" },
//           { value: 1, name: "50岁以上" }
//         ]
//       }
//     ]
//   };

//   // 使用刚指定的配置项和数据显示图表。
//   myChart.setOption(option);
//   window.addEventListener("resize", function () {
//     myChart.resize();
//   });
// })();
// 学习进度柱状图模块
// (function () {
//   // 基于准备好的dom，初始化echarts实例
//   var myChart = echarts.init(document.querySelector(".bar1 .chart"));

//   var data = [90, 80, 75, 65, 65];
//   var titlename = ["javascript", "VUE", "jQuery", "HTML5", "CSS3"];
//   var valdata = ["精通", "熟练", "熟练", "掌握", "掌握"];
//   var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
//   option = {
//     //图标位置
//     grid: {
//       top: "10%",
//       left: "22%",
//       bottom: "10%"
//     },
//     xAxis: {
//       show: false
//     },
//     yAxis: [
//       {
//         show: true,
//         data: titlename,
//         inverse: true,
//         axisLine: {
//           show: false
//         },
//         splitLine: {
//           show: false
//         },
//         axisTick: {
//           show: false
//         },
//         axisLabel: {
//           color: "#fff",

//           rich: {
//             lg: {
//               backgroundColor: "#339911",
//               color: "#fff",
//               borderRadius: 15,
//               // padding: 5,
//               align: "center",
//               width: 15,
//               height: 15
//             }
//           }
//         }
//       },
//       {
//         show: true,
//         inverse: true,
//         data: valdata,
//         axisLabel: {
//           textStyle: {
//             fontSize: 12,
//             color: "#fff"
//           }
//         }
//       }
//     ],
//     series: [
//       {
//         name: "条",
//         type: "bar",
//         yAxisIndex: 0,
//         data: data,
//         barCategoryGap: 50,
//         barWidth: 10,
//         itemStyle: {
//           normal: {
//             barBorderRadius: 20,
//             color: function (params) {
//               var num = myColor.length;
//               return myColor[params.dataIndex % num];
//             }
//           }
//         },
//         label: {
//           normal: {
//             show: true,
//             position: "inside",
//             formatter: "{c}%"
//           }
//         }
//       },
//       {
//         name: "框",
//         type: "bar",
//         yAxisIndex: 1,
//         barCategoryGap: 50,
//         data: [100, 100, 100, 100, 100],
//         barWidth: 15,
//         itemStyle: {
//           normal: {
//             color: "none",
//             borderColor: "#00c1de",
//             borderWidth: 3,
//             barBorderRadius: 15
//           }
//         }
//       }
//     ]
//   };

//   // 使用刚指定的配置项和数据显示图表。
//   myChart.setOption(option);
//   window.addEventListener("resize", function () {
//     myChart.resize();
//   });
// })();
// 折线图 优秀作品
// (function () {
//   // 基于准备好的dom，初始化echarts实例
//   var myChart = echarts.init(document.querySelector(".line1 .chart"));

//   option = {
//     tooltip: {
//       trigger: "axis",
//       axisPointer: {
//         lineStyle: {
//           color: "#dddc6b"
//         }
//       }
//     },
//     legend: {
//       top: "0%",
//       textStyle: {
//         color: "rgba(255,255,255,.5)",
//         fontSize: "12"
//       }
//     },
//     grid: {
//       left: "10",
//       top: "30",
//       right: "10",
//       bottom: "10",
//       containLabel: true
//     },

//     xAxis: [
//       {
//         type: "category",
//         boundaryGap: false,
//         axisLabel: {
//           textStyle: {
//             color: "rgba(255,255,255,.6)",
//             fontSize: 12
//           }
//         },
//         axisLine: {
//           lineStyle: {
//             color: "rgba(255,255,255,.2)"
//           }
//         },

//         data: [
//           "01",
//           "02",
//           "03",
//           "04",
//           "05",
//           "06",
//           "07",
//           "08",
//           "09",
//           "11",
//           "12",
//           "13",
//           "14",
//           "15",
//           "16",
//           "17",
//           "18",
//           "19",
//           "20",
//           "21",
//           "22",
//           "23",
//           "24",
//           "25",
//           "26",
//           "27",
//           "28",
//           "29",
//           "30"
//         ]
//       },
//       {
//         axisPointer: { show: false },
//         axisLine: { show: false },
//         position: "bottom",
//         offset: 20
//       }
//     ],

//     yAxis: [
//       {
//         type: "value",
//         axisTick: { show: false },
//         axisLine: {
//           lineStyle: {
//             color: "rgba(255,255,255,.1)"
//           }
//         },
//         axisLabel: {
//           textStyle: {
//             color: "rgba(255,255,255,.6)",
//             fontSize: 12
//           }
//         },

//         splitLine: {
//           lineStyle: {
//             color: "rgba(255,255,255,.1)"
//           }
//         }
//       }
//     ],
//     series: [
//       {
//         name: "流入",
//         type: "line",
//         smooth: true,
//         symbol: "circle",
//         symbolSize: 5,
//         showSymbol: false,
//         lineStyle: {
//           normal: {
//             color: "#0184d5",
//             width: 2
//           }
//         },
//         areaStyle: {
//           normal: {
//             color: new echarts.graphic.LinearGradient(
//               0,
//               0,
//               0,
//               1,
//               [
//                 {
//                   offset: 0,
//                   color: "rgba(1, 132, 213, 0.4)"
//                 },
//                 {
//                   offset: 0.8,
//                   color: "rgba(1, 132, 213, 0.1)"
//                 }
//               ],
//               false
//             ),
//             shadowColor: "rgba(0, 0, 0, 0.1)"
//           }
//         },
//         itemStyle: {
//           normal: {
//             color: "#0184d5",
//             borderColor: "rgba(221, 220, 107, .1)",
//             borderWidth: 12
//           }
//         },
//         data: [
//           30,
//           40,
//           30,
//           40,
//           30,
//           40,
//           30,
//           60,
//           20,
//           40,
//           20,
//           40,
//           30,
//           40,
//           30,
//           40,
//           30,
//           40,
//           30,
//           60,
//           20,
//           40,
//           20,
//           40,
//           30,
//           60,
//           20,
//           40,
//           20,
//           40
//         ]
//       },
//       {
//         name: "流出",
//         type: "line",
//         smooth: true,
//         symbol: "circle",
//         symbolSize: 5,
//         showSymbol: false,
//         lineStyle: {
//           normal: {
//             color: "#00d887",
//             width: 2
//           }
//         },
//         areaStyle: {
//           normal: {
//             color: new echarts.graphic.LinearGradient(
//               0,
//               0,
//               0,
//               1,
//               [
//                 {
//                   offset: 0,
//                   color: "rgba(0, 216, 135, 0.4)"
//                 },
//                 {
//                   offset: 0.8,
//                   color: "rgba(0, 216, 135, 0.1)"
//                 }
//               ],
//               false
//             ),
//             shadowColor: "rgba(0, 0, 0, 0.1)"
//           }
//         },
//         itemStyle: {
//           normal: {
//             color: "#00d887",
//             borderColor: "rgba(221, 220, 107, .1)",
//             borderWidth: 12
//           }
//         },
//         data: [
//           50,
//           30,
//           50,
//           60,
//           10,
//           50,
//           30,
//           50,
//           60,
//           40,
//           60,
//           40,
//           80,
//           30,
//           50,
//           60,
//           10,
//           50,
//           30,
//           70,
//           20,
//           50,
//           10,
//           40,
//           50,
//           30,
//           70,
//           20,
//           50,
//           10,
//           40
//         ]
//       }
//     ]
//   };

//   // 使用刚指定的配置项和数据显示图表。
//   myChart.setOption(option);
//   window.addEventListener("resize", function () {
//     myChart.resize();
//   });
// })();

// 点位分布统计模块
// (function () {
//   // 1. 实例化对象
//   var myChart = echarts.init(document.querySelector(".pie1  .chart"));
//   // 2. 指定配置项和数据
//   var option = {
//     legend: {
//       top: "90%",
//       itemWidth: 10,
//       itemHeight: 10,
//       textStyle: {
//         color: "rgba(255,255,255,.5)",
//         fontSize: "12"
//       }
//     },
//     tooltip: {
//       trigger: "item",
//       formatter: "{a} <br/>{b} : {c} ({d}%)"
//     },
//     // 注意颜色写的位置
//     color: [
//       "#2bf8ff",
//       "#478af8",
//       "#40f453",
//       "#eca00e",
//       "#faee04"
//     ],
//     series: [
//       {
//         name: "点位统计",
//         type: "pie",
//         // 如果radius是百分比则必须加引号
//         radius: ["10%", "70%"],
//         center: ["50%", "42%"],
//         roseType: "radius",
//         data: [
//           { value: 20, name: "票" },
//           { value: 26, name: "卡" },
//           { value: 24, name: "培训" },
//           { value: 25, name: "私教" },
//           { value: 20, name: "场地" }
//         ],
//         // 修饰饼形图文字相关的样式 label对象
//         label: {
//           fontSize: 10
//         },
//         // 修饰引导线样式
//         labelLine: {
//           // 连接到图形的线长度
//           length: 10,
//           // 连接到文字的线长度
//           length2: 10
//         }
//       }
//     ]
//   };

//   // 3. 配置项和数据给我们的实例化对象
//   myChart.setOption(option);
//   // 4. 当我们浏览器缩放的时候，图表也等比例缩放
//   window.addEventListener("resize", function () {
//     // 让我们的图表调用 resize这个方法
//     myChart.resize();
//   });
// })();



// // 男女统计模块
// (function () {
//   // 1. 实例化对象
//   var myChart3 = echarts.init(document.querySelector(".home .chart"));

//   // 基于准备好的dom，初始化echarts实例

//   option3 = {
//       tooltip: {
//         trigger: 'item',
//         formatter: "{b} : {c} ({d}%)"
//       },
//       legend: {
//         right: 10,
//         top: 30,
//         height: 140,
//         itemWidth: 10,
//         itemHeight: 10,
//         itemGap: 10,
//         textStyle: {
//           color: 'rgba(255,255,255,.6)',
//           fontSize: 12
//         },
//         orient: 'vertical',
//         data: ['男', '女']
//       },
//       calculable: true,
//       series: [
//         {
//           name: ' ',
//           color: ['#5739d3', '#d73c75', '#c9c862', '#c98b62', '#c962b9', '#7562c9', '#c96262'],
//           type: 'pie',
//           radius: [30, 70],
//           center: ['35%', '50%'],
//           roseType: 'radius',
//           label: {
//             normal: {
//               show: true
//             },
//             emphasis: {
//               show: true
//             }
//           },

//           lableLine: {
//             normal: {
//               show: true
//             },
//             emphasis: {
//               show: true
//             }
//           },

//           data: [
//             { value: 50, name: '男' },
//             { value: 45, name: '女' },
//           ]
//         },
//       ]
//     };

//     // 使用刚指定的配置项和数据显示图表。
//   myChart3.setOption(option3);
//   // 4. 当我们浏览器缩放的时候，图表也等比例缩放
//   window.addEventListener("resize", function () {
//     // 让我们的图表调用 resize这个方法
//     myChart.resize();
//   });
// })();

